<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <!-- 引入 Google Fonts 中的现代字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <!-- 引入 jquery CDN -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        /* 通用样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #e0f7fa, #f4f4f9);
        }

        /* 导航栏样式 */
        .container .navbar {
            width: 100%;
            height: 80px;
            background: linear-gradient(45deg, #0084ff, #00c3ff);
            display: flex;
            align-items: center;
            padding: 0 40px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background 0.3s ease;
            position: relative;
            z-index: 10;
            gap: 25px;
        }

        .container .navbar a {
            display: inline-block;
            width: auto;
            padding: 12px 20px;
            color: white;
            font-size: 18px;
            font-weight: 500;
            text-decoration: none;
            text-align: center;
            transition: all 0.3s ease;
            border-radius: 8px;
            position: relative;
        }

        .container .navbar a:hover {
            background-color: #9acd32;
            transform: translateY(-2px);
        }

        /* 当前激活页面的导航栏链接样式 */
        .container .navbar a.active {
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* 淡入动画关键帧 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 用户管理页面样式 */
        .user-management {
            max-width: 1200px;
            margin: 30px auto;
            padding: 20px;
            animation: fadeIn 0.5s ease forwards;
        }

        .section-title {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: #0084ff;
        }

        /* 用户表单样式 */
        .user-form {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        .user-form:hover {
            transform: translateY(-5px);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 16px;
            font-weight: 500;
            color: #555;
            margin-bottom: 8px;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #0084ff;
            box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.2);
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-primary {
            background: #0084ff;
            color: white;
        }

        .btn-primary:hover {
            background: #0066cc;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 132, 255, 0.3);
        }

        .btn-danger {
            background: #ff4d4f;
            color: white;
        }

        .btn-danger:hover {
            background: #cc3333;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
        }

        /* 用户列表样式 */
        .user-list {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .user-table {
            width: 100%;
            border-collapse: collapse;
        }

        .user-table th,
        .user-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .user-table th {
            background: #f5f7fa;
            color: #555;
            font-weight: 600;
        }

        .user-table tr:last-child td {
            border-bottom: none;
        }

        .user-table tr:hover {
            background: #f9f9f9;
        }

        .empty-state {
            padding: 50px;
            text-align: center;
            color: #888;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #ddd;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container .navbar {
                padding: 0 20px;
                gap: 10px;
            }

            .container .navbar a {
                padding: 10px 15px;
                font-size: 16px;
            }

            .user-management {
                padding: 10px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        <div class="navbar">
            <a href="/MainPagehtml/UserCreate.html">用户管理</a>
            <a href="/MainPagehtml/ModelCorpus.html">模型语料</a>
            <a href="/MainPagehtml/ModelShow.html">模型效果</a>
        </div>
        <!-- 用户管理页面内容 -->
        <div class="user-management">
            <h2 class="section-title">用户管理</h2>

            <!-- 添加用户表单 -->
            <div class="user-form">
                <h3 class="form-title">添加新用户</h3>
                <form id="addUserForm">
                    <div class="form-group">
                        <label for="newUsername">用户名</label>
                        <input type="text" id="newUsername" required placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="newPassword">密码</label>
                        <input type="password" id="newPassword" required placeholder="请输入密码">
                    </div>
                    <button type="button" class="btn btn-primary" id="addUserBtn">
                        <i class="fa fa-plus mr-2"></i>添加用户
                    </button>
                </form>
            </div>

            <!-- 用户列表 -->
            <div class="user-list">
                <table class="user-table" id="userTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 用户数据将通过 JavaScript 动态填充 -->
                    </tbody>
                </table>
                <div class="empty-state" id="emptyState">
                    <i class="fa fa-user-circle-o"></i>
                    <p>暂无用户数据</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟用户数据（实际应用中应从后端获取）
       let users = [
            { id: 1, username: 'root1001', password: '123456' },
            { id: 2, username: '202110201006', password: '806108' },
       ];

        // DOM 元素
        const userTable = document.getElementById('userTable');
        const userTableBody = userTable.querySelector('tbody');
        const emptyState = document.getElementById('emptyState');
        const addUserBtn = document.getElementById('addUserBtn');
        const newUsernameInput = document.getElementById('newUsername');
        const newPasswordInput = document.getElementById('newPassword');

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            renderUserList();
            setupEventListeners();
        });

        // 设置事件监听器
        function setupEventListeners() {
            // 添加用户按钮点击事件
            addUserBtn.addEventListener('click', addUser);
            
            // 回车键提交表单
            newPasswordInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    addUser();
                }
            });
        }

        // 渲染用户列表
        function renderUserList() {
            // 清空表格
            userTableBody.innerHTML = '';
            
            // 检查是否有用户数据
            if (users.length === 0) {
                emptyState.style.display = 'block';
                return;
            }
            
            // 隐藏空状态提示
            emptyState.style.display = 'none';
            
            // 填充用户数据
            users.forEach(user => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>
                        <button class="btn btn-danger btn-sm delete-user" data-id="${user.id}">
                            <i class="fa fa-trash-o mr-1"></i>删除
                        </button>
                    </td>
                `;
                userTableBody.appendChild(row);
            });
            
            // 添加删除按钮事件
            document.querySelectorAll('.delete-user').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const userId = parseInt(e.currentTarget.getAttribute('data-id'));
                    deleteUser(userId);
                });
            });
        }

        // 添加用户
        function addUser() {
            const username = newUsernameInput.value.trim();
            const password = newPasswordInput.value.trim();
            
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            $.ajax({
                method: 'Post',
                url: '/createuser',
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({
                    'username': username,
        		    'password':password
                }),
                success: function (data) {
			    if(data.status==='success'){
                // 创建新用户对象
           		 const newUser = {
               		 id: users.length > 0 ? Math.max(...users.map(u => u.id)) + 1 : 1,
               		username,
                	password
            		};
           		 // 添加到用户列表
           		 users.push(newUser);
          	 	// 保存到本地存储（可选，用于临时保存数据）
           		 localStorage.setItem('users', JSON.stringify(users));
            		// 重新渲染列表
            		renderUserList();
            		// 清空表单
           		newUsernameInput.value = '';
            		newPasswordInput.value = '';
	     		// 显示成功提示
           		showNotification('用户添加成功！', 'success');
                }else{
                    alert('用户添加失败！');
                }
                }
            });  
        }

        // 删除用户
        function deleteUser(userId) {
		if (confirm('确定要删除此用户吗？')) {
    			// 查找要删除的用户
    			const userToDelete = users.find(user => user.id === userId);
    
    			if (!userToDelete) {
        		showNotification('用户不存在！', 'danger');
        		return;
   	 		}

    			// 获取用户名和密码
    			const username = userToDelete.username;
    			const password = userToDelete.password;

                var usernamePrefix = username.slice(0, 4);
                if(usernamePrefix==='root'){
                 alert('超级用户无法删除，请联系系统管理员进行操作！');
                }else{	
                $.ajax({
                		method: 'Post',
                		url: '/deleteuser',
                		dataType: 'json',
                		contentType: 'application/json;charset=utf-8',
                		data: JSON.stringify({
                    		'username': username,
		   		 'password':password
                		}),
                	success: function (data) {
                        if(data.status==='success'){
                        // 过滤掉要删除的用户
                		users = users.filter(user => user.id !== userId);
                		// 更新本地存储
                		localStorage.setItem('users', JSON.stringify(users));
                		// 重新渲染列表
                		renderUserList();
                		// 显示删除成功提示
                	    showNotification('用户已删除！', 'danger');
                        }else{
                            alert('用户删除失败！');
                        }
               		}
           	    });
                }
            }
        }

        // 显示通知提示
        function showNotification(message, type = 'success') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.style = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: ${type === 'success' ? '#4CAF50' : '#f44336'};
                color: white;
                padding: 15px 25px;
                border-radius: 6px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.2);
                z-index: 100;
                transform: translateY(-20px);
                opacity: 0;
                transition: all 0.3s ease;
            `;
            notification.innerHTML = `
                <i class="fa ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
                ${message}
            `;
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.style.transform = 'translateY(0)';
                notification.style.opacity = '1';
            }, 10);
            
            // 自动关闭
            setTimeout(() => {
                notification.style.transform = 'translateY(-20px)';
                notification.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }
    </script>
</body>

</html>
    
